// import echarts from "echarts";
// import * as echarts from "echarts/core";
// 按需引入方式
import echarts from "@/views/package/echarts/components/BaseEcharts/utils/echarts";
export function getBarOptions() {
  let data = {
    xData: [
      "荣昌区",
      "铜梁区",
      "大足区",
      "潼南区",
      "合川区",
      "永川区",
      "綦江区",
      "涪陵区",
      "南川区",
      "江津区",
      "璧山区",
      "长寿区",
    ],
    yData: [
      709.8, 661.02, 700.54, 475.26, 972.44, 1012.37, 714.3, 1225.08, 360.76,
      1109.44, 747.09, 732.56,
    ],
  };

  const option = {
    title: {
      text: "2020年重庆市主城新区GDP",
      subtext: "卖山楂啦prss",
      x: "center",
      textStyle: {
        color: "#000000",
        fontSize: 20,
      },
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true },
        saveAsImage: {
          //excludeComponents :['toolbox'],
          pixelRatio: 5,
        },
      },
    },
    grid: [
      {
        top: 70,
        bottom: 101,
        left: 50,
        right: 30,
      },
      {
        height: 60,
        bottom: 40,
        left: 56,
        right: 35,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: data.xData,
        gridIndex: 0,
        // 标签颜色
        axisLabel: {
          color: "#333",
          textStyle: {
            fontSize: 13, //更改坐标轴文字大小
          },
        },
        // 轴线颜色
        axisLine: {
          lineStyle: {
            color: "#e7e7e7",
          },
        },

        zlevel: 2,
      },

      // 辅助柱形图x轴设置
      {
        type: "category",
        gridIndex: 1,
        // 不显示x轴
        axisLine: {
          show: false,
        },
        zlevel: 1,
      },
    ],
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        axisLabel: {
          color: "#333",
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#ccc",
          },
        },
        axisTick: {
          lineStyle: {
            color: "#ccc",
          },
        },
      },
      {
        type: "value",
        gridIndex: 1,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        data: data.yData,
        type: "bar",
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#555",
          },
        },
        // 柱形图颜色
        itemStyle: {
          normal: {
            color: (params) => {
              let colors = [
                "#a1afc9",
                "#28bf7e",
                "#ed7c2f",
                "#f2a93b",
                "#f9cf36",
                "#c0ebd7",
                "#4cd698",
                "#f4914e",
                "#fcb75b",
                "#ffe180",
                "#b6c2ff",
                "#96edc1",
              ];
              return colors[params.dataIndex];
            },
          },
        },
        xAxisIndex: 0,
        yAxisIndex: 0,
      },
      {
        data: [
          {
            name: "桥头堡城市",
            value: 1,
          },
        ],
        label: {
          show: true,
          position: "inside",
          formatter: "{b}",
          offset: [0, 10],
          textStyle: {
            color: "#777",
            fontSize: 16,
          },
        },
        type: "bar",
        barGap: 0,
        barWidth: "43.2727%",
        itemStyle: {
          normal: {
            color: "rgba(255, 71, 119, .5)",
          },
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
      {
        data: [
          {
            name: "重要战略支点城市",
            value: 1,
          },
        ],
        label: {
          show: true,
          position: "inside",
          formatter: "{b}",
          offset: [0, 10],
          textStyle: {
            color: "#777",
            fontSize: 16,
          },
        },
        type: "bar",
        barGap: 0,
        barWidth: "33.5818%",
        itemStyle: {
          normal: {
            color: "rgba(246, 146, 28, .8)",
          },
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
      {
        data: [
          {
            name: "同城化发展先行区",
            value: 1,
          },
        ],
        label: {
          show: true,
          position: "inside",
          formatter: "{b}",
          offset: [0, 10],
          textStyle: {
            color: "#777",
            fontSize: 16,
          },
        },
        type: "bar",
        barGap: 0,
        barWidth: "43.2727%",
        itemStyle: {
          normal: {
            color: "rgba(240, 215, 95, .5)",
          },
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
    ],
  };

  return option;
}
